<!DOCTYPE html>
<!-- <html lang="en"> -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线聊天室</title>
    {{-- <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet"> --}}
    {{-- <link rel="stylesheet" href="assets/layui/css/layui.css"> --}}
    <link href="assets/home/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/home/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/home/css/jquery.magnify.css" rel="stylesheet">
    <link href="assets/home/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1210323_0qg4m5smd9ah.css">
    <script>
        //端口
        const wsPort = "{{$socket['dk']}}";
        //通讯地址
        const hostname = "{{$socket['ip']}}";
        //初始化
        usericon = "{{$data->icon}}"; //头像
        usernick = "{{$data->nickname}}"; //昵称
        username = "{{$data->user_name}}"; //账号

    </script>
    <style>
        .ios-user-select * {
            -webkit-user-select: text !important;
        }

        div {
            -webkit-user-select: text;
            height: auto;
        }

        div * {
            -webkit-user-select: text
        }

    </style>
</head>

<body>

    <div id="app" style="height: 100vh;">

        <div class="chat-box">
            <div class="msg-search" id="msg-search">
                <div class="msg-search-box">
                    <span class="msg-top-title">房间列表</span>
                    {{-- <div class="msg-search-s">
                        <input type="text" class="msg-search-input" placeholder="搜索">
                    </div> --}}
                    <div class="msg-top-icon" id="msg-top-icon">
                        <img src="{{$data->icon}}" alt="" width="30px" height="30px" style="object-fit: cover;">
                    </div>
                    <div class="msg-search-add" id="msg-search-add">
                        +
                    </div>
                </div>
            </div>
            <div class="msg-list-box" id="msg-list-box">

                @foreach ($room as $key=>$item)
                <div class="msg-list-row-box @if($loop->first)msg-list-row-active @endif">
                    <div class="msg-list-row-item" onclick="msgclick(this)">
                        <span class="room-id" style="display:none">{{$item->room_id}}</span>
                        <img class="msg-list-row-img" src="{{$item->room_icon}}" alt="">
                        <span class="msg-list-row-title">{{$item->room_title}}</span>
                        <span class="msg-list-row-time">{{$item->hot}}</span>
                        <span class="msg-list-row-nwes">{{$item->nickname}}：{{$item->art}}</span>
                    </div>
                </div>
                @endforeach


            </div>
            <div class="msg-chat-box" id="msg-chat-box">
                <div class="chat-header">
                    <span class="msg-chat-return iconfont icon-fanhui" id="msg-return" style="display:none"></span>
                    @{{room.title}}
                    <svg v-if="room.edit" t="1580383299499" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1957" width="20" height="20" style="position: relative;
                        top: 4px; left: 3px;" id="edit-room" @click="editroom">
                        <path
                            d="M902.656 825.856c0 54.784-54.784 109.568-109.568 109.568H198.144c-54.784 0-109.568-54.784-109.568-109.568V230.912c0-54.784 54.784-109.568 109.568-109.568h396.288l99.328-89.088H164.864C74.24 32.768 0 106.496 0 197.632v660.992C0 950.272 74.24 1024 165.376 1024h660.992c91.136 0 165.376-73.728 165.376-165.376V330.24l-89.088 99.328v396.288z"
                            fill="#ffffff" p-id="1958"></path>
                        <path
                            d="M346.112 673.792l211.456-73.216-138.24-137.216-73.216 210.432z m582.144-441.344L790.016 95.232 441.344 441.856l138.24 137.216 348.672-346.624z m73.728-132.608l-78.848-77.824c-16.384-16.384-44.032-15.36-61.44 2.048L814.08 71.168l138.24 137.216 47.616-47.104c17.408-17.92 18.432-45.056 2.048-61.44z"
                            fill="#ffffff" p-id="1959"></path>
                    </svg>
                    <span id="signout" class="msg-chat-login iconfont icon-tuichu"></span>
                </div>
                <div class="chat-mian" id="chat-main">
                    <template v-for="(chat,index) in chatData" :key="index">
                        <!-- 客服-文本 -->
                        <div class="info-box CS-info-box" v-if="SupportText(index)">
                            <div class="time" v-if="Long(index) || index == 0">@{{chat.time}}</div>
                            <div class="avatar CS-avatar" onclick="chainfo(this)"><img :src="chat.icon"
                                    :alt="chat.name"></div>
                            <div class="msg-title">@{{chat.nick}}</div>
                            <div class="info text-info">
                                <span></span>
                                <div v-html="chat.content"></div>
                            </div>
                        </div>
                        <!-- 客服-图片 -->
                        <div class="info-box CS-info-box" v-if="SupportPic(index)">
                            <div class="time" v-if="Long(index) || index == 0">@{{chat.time}}</div>
                            <div class="msg-title" style="margin-left:55px;position: relative; top: 12px;">
                                @{{chat.nick}}</div>
                            <div class="avatar CS-avatar" onclick="chainfo(this)"><img :src="chat.icon"
                                    :alt="chat.name"></div>
                            <div class="info img-info">
                                <img style="position: relative; top: 12px;" data-magnify="gallery"
                                    :data-src="chat.content" :src="chat.content">
                            </div>
                        </div>

                        <!-- 游客-文本 -->
                        <div class="info-box user-info-box" v-if="VisitorText(index)">
                            <div class="time" v-if="Long(index) || index == 0">@{{chat.time}}</div>
                            <div class="avatar user-avatar" onclick="chainfo(this)"><img :src="chat.icon"
                                    :alt="chat.name"></div>
                            <div class="msg-title-r">@{{chat.nick}}</div>
                            <div class="info text-info">
                                <span></span>
                                <div v-html="chat.content"></div>
                            </div>
                        </div>
                        <!-- 游客-图片 -->
                        <div class="info-box user-info-box" v-if="VisitorPic(index)">
                            <div class="time" v-if="Long(index) || index == 0">@{{chat.time}}</div>
                            <div class="avatar user-avatar" onclick="chainfo(this)"><img :src="chat.icon"
                                    :alt="chat.name"></div>
                            <div class="msg-title-r">@{{chat.nick}}</div>
                            <div class="info img-info">
                                <img data-magnify="gallery" :data-src="chat.content" :src="chat.content">
                            </div>
                        </div>
                    </template>

                    <!-- <div class="change-but"></div> -->
                </div>
                <div class="chat-edit">
                    <div id="editor"></div>
                    <button class="send-button" id="submit" @click="Send">发送</button>
                </div>

            </div>

        </div>

    </div>

    <script>
        // //获取房间标题
        var room_title = document.getElementsByClassName('msg-list-row-title')[0].innerHTML;
        // //获取房间ID
        var room_id = document.getElementsByClassName('room-id')[0].innerHTML;

    </script>

    <script type="text/javascript" src="assets/home/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="assets/home/js/jquery.magnify.js"></script>
    <script type="text/javascript" src="assets/home/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="assets/home/js/wangEditor.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="assets/layer/layer.js"></script>
    <script type="text/javascript" src="assets/home/js/main.js"></script>
    <!-- <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> -->

</body>

</html>
